<template>
  <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40" style="background:#f1f5f7;">
      <el-row class="el-padding-20 el-white-bgcolor">
        <!--el-button size="small" @click="importData">excel导入</el-button>
        <el-button size="small" @click="downloadData">下载excel</el-button-->
        <el-row class="el-font-xs">
          <el-col :span="6">
            <el-button type="primary" size="small" @click="upload()">上传</el-button>
          </el-col>
          <el-col :span="18" class="el-align-right">
            名称：
            <el-input
              class="el-margin-r-10"
              placeholder="请输入文件名"
              prefix-icon="el-icon-search"
              v-model="name"
              style="width:130px;"
              @change="search">
            </el-input>
          </el-col>
        </el-row>
        <el-table
          class="el-margin-t-10"
          :data="table.tableData"
          border
          stripe
          style="width:100%"
          size="small"
          :highlight-current-row="true"
          ref="multipleTable"
        >
          <el-table-column label="文件名" prop="name" width="100"></el-table-column>
          <el-table-column label="文件大小" prop="size" width="100"></el-table-column>
          <el-table-column label="创建人" prop="createUserName" width="180"></el-table-column>
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="scope">
              {{scope.row.createTime|dateformat()}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="fileUrl=scope.row.url">下载</el-button>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="el-margin-t-10 my-el-pagination"
          @current-change="currentChangeHandle"
          :current-page="table.currentPage"
          :page-size="table.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="table.rowCount"
        ></el-pagination>
      </el-row>
      <div id="iframe" style="display:none;">
        <iframe ref="IframeReportImg" name="IframeReportImg" width="0" height="0" :src="fileUrl" @onload="download"></iframe>
      </div>
    </el-row>
</template>

<script>
  import { bus } from "../../tools/bus";
  import { setItem, getItem } from "../../tools/common";
  export default{
    data(){
        return {
          name:"",
          fileUrl:"",
          iframe:"",
          table: {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            rowCount: 3,
            queryKey: ""
          }
        }
    },
    mounted(){
      this.getMessage();
    },
    methods:{
      download(){
        console.log(this.$refs.IframeReportImg.src);
        window.frames["IframeReportImg"].document.execCommand("SaveAs");
      },
      upload(){
        this.$emit("upload");
      },
      del(rows){
        this.$confirm("确定删除文件"+rows.name+"？",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = "/file/delete";
          let p = {
            fileId: rows.fileId
          };

          this.$http
            .fetch(url, p)
            .then(res => {
              this.getMessage();
            })
            .catch(err => {});
        }).catch(() => {});
      },
      search(){
        this.table.currentPage = 1;
        this.getMessage();
      },
      getMessage(){
        let url = "/file/list";
        let info = getItem("info")?getItem("info"):{};
        let p = {
          communityId: info.communityId,
          start:(this.table.currentPage-1)*this.table.pageSize,
          num:this.table.pageSize
        };

        if(this.name)p.name=this.name;

        this.$http
          .fetch(url, p)
          .then(res => {
            this.table.rowCount = res.data.total
            this.table.tableData = [];
            for(let i=0;i<res.data.rows.length;i++){
              let row = res.data.rows[i];
              this.table.tableData.push({
                communityId:info.communityId,
                fileId:(row.fileId||row.fileId==0)?row.fileId:"",
                name:row.name?row.name:"",
                size:row.size?row.size:"",
                url:row.url?row.url:"",
                createTime:row.createTime?row.createTime:"",
                createUserName:row.createUserName?row.createUserName:""
              });
            }


          })
          .catch(err => {});
      },
      currentChangeHandle(pageNum){
        this.table.currentPage = pageNum;
        this.getMessage()
      }
    }
  }
</script>

<style>
</style>
